<hy-drawer
  class="{% if page.cover %}cover{% endif %}"
  align="left"
  threshold="10"
  touch-events
  prevent-default
>
  <header id="_sidebar" class="sidebar" role="banner">
    {% if image.background %}
      {% capture bg_style %}background:{{ image.background }}{% endcapture %}
      {% capture bg_class %}sidebar-bg {% if image.overlay %}sidebar-overlay{% endif %}{% endcapture %}
    {% else %}
      {% assign bg_color = page.theme_color | default:site.theme_color | default:color %}
      {% capture bg_style %}background-color:{{bg_color}};{% if image != 'none' %}background-image:url({% include smart-url.txt url=image %}){% endif %}{% endcapture %}
      {% capture bg_class %}sidebar-bg {% if image != 'none' %}sidebar-overlay{% endif %}{% endcapture %}
    {% endif %}
    <div class="{{bg_class}}" style="{{bg_style}}"></div>

    <div class="sidebar-sticky">
      <div class="sidebar-about">
        {% if site.logo %}
          <a class="no-hover" href="{{ '/' | relative_url }}" tabindex="-1">
            <img src="{{ site.logo | relative_url }}" class="avatar" alt="{{ site.short_title | default:site.title }}" data-ignore />
          </a>
        {% endif %}
        <h2 class="h1"><a href="{{ '/' | relative_url }}">{{ site.short_title | default:site.title }}</a></h2>
        {% assign text = site.tagline | default:site.description %}
        {% if text %}
          <p class="{% if text.size > 100 %}fine{% endif %}">
            {{ text | markdownify | replace:'<p>','' | replace:'</p>','' }}
          </p>
        {% endif %}
      </div>

      <nav class="sidebar-nav heading" role="navigation">
        {% include body/nav.html %}
      </nav>

      {% assign author = site.data.authors.first[1] | default:site.author %}

      <div class="sidebar-social">
        {% include components/social.html author=author %}
      </div>
    </div>
  </header>
</hy-drawer>
<hr class="sr-only" hidden />
